import {Component} from 'react'
class Form extends  Component{

    constructor(){
        super();
        this.state={
            userInfo:{
               name:"",
               mobile:""
            }
        }
    }

    nameInput=(e)=>{
        console.log(e.target.value);

        this.setState({userInfo:{...this.state.userInfo,name:e.target.value}})

    }
    mobieInput=(e)=>{

        this.setState({userInfo:{...this.state.userInfo,mobile:e.target.value}})
    }
    setData=()=>{
        this.setState({userInfo:{name:"李四",mobile:"138"}})
    }
    submit=()=>{
        console.log("获取文本框的值，传给接口");
    console.log("表单的值",this.state.userInfo);
    }
    render(){
        return(
            <div className='edit'>
                <div>
                {this.state.userInfo.name}
                <br />
                {this.state.userInfo.mobile}
                </div>
                  <div> 姓名:<input onChange={this.nameInput} value={this.state.userInfo.name}></input></div>
                  <div> 联系电话:<input onChange={this.mobieInput} value={this.state.userInfo.mobile}></input></div>
                 
                 
                  <div><button onClick={this.submit}>修改</button></div>

                  <div><button onClick={this.setData}>赋值</button></div>
            </div>
        )
    }

}
export default Form;